<template>
  <div class="vmui-scroll-section" @touchstart="onTouchStart($event)" @touchmove="onTouchMove($event)" @touchend="onTouchEnd($event)" @scroll="onScroll($event)" ref="vmui-scroll-section">
    <div class="vmui-inner-wrap" ref="innerWrapRef">
      <div class="vmui-loadmore-top">
        <p class="arrow" ref="arrowRef" style="display: inline-block">
          <i class="iconfont icon-down"></i>
        </p>
        <i class="iconfont icon-loading-spinner vmui-icon vmui-loading-icon" style="display: none" ref="pullLoadingIconRef"></i>
        <span class="desc" v-html="desc"></span>
      </div>
      <slot></slot>
      <div class="vmui-loadmore-bottom">
        <div class="vmui-loading-box" style="display: none" ref="loadingBottomBoxRef">
          <i class="iconfont icon-loading-fading vmui-icon vmui-loading-icon"></i>
          <span>加载中...</span>
        </div>
        <div class="vmui-loading-finish-box" v-if="infiniteScroll && !isScrollBottomFetching && isScrollBottomFetchingFinished">
          没有更多数据了
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import core from './core'
  export default {
    props: {
      pullRefresh: {
        type: Function
      },
      infiniteScroll: {
        type: Function
      },
      infiniteScrollDistance: {
        type: Number,
        default: 0
      },
      pullDesc: {
        type: String,
        default: '下来刷新'
      },
      pullEnableDesc: {
        type: String,
        default: '释放刷新'
      },
      pullEnableDoingDesc: {
        type: String,
        default: '加载中...'
      },
      pullEnableDoneDesc: {
        type: String,
        default: '加载完成'
      }
    },
    data () {
      return {
        isPullRefreshFetching: false,
        isScrollBottomFetching: false,
        isScrollBottomFetchingFinished: false,
        scrollTop: 0,
        // default pulling pullingEnable doing done
        statusTop: 'default'
      }
    },
    computed: {
      desc () {
        switch (this.statusTop) {
          case 'pulling':
            return this.pullDesc
          case 'pullingEnable':
            return this.pullEnableDesc
          case 'doing':
            return this.pullEnableDoingDesc
          case 'done':
            return this.pullEnableDoneDesc
          default:
            return ''
        }
      }
    },
    watch: {
      isPullRefreshFetching (newVal) {
        if (newVal) {
          this.$refs['arrowRef'].style.display = 'none'
          this.$refs['pullLoadingIconRef'].style.display = 'inline-block'
          this.statusTop = 'doing'
        } else {
          this.statusTop = 'done'
          this.$refs['innerWrapRef'].style.transform = `translateY(0px)`
          this.$refs['arrowRef'].style.display = 'inline-block'
          this.$refs['pullLoadingIconRef'].style.display = 'none'
          // 重置infinite-scroll
          this.isScrollBottomFetching = false
          this.isScrollBottomFetchingFinished = false
        }
      }
    },
    methods: {
      onTouchStart (event) {
        this.pullRefresh && !this.isScrollBottomFetching && !this.isPullRefreshFetching && core.handleTouchStart.call(this, event)
      },
      onTouchMove (event) {
        this.pullRefresh && !this.isScrollBottomFetching && !this.isPullRefreshFetching && core.handleTouchMove.call(this, event)
      },
      onTouchEnd (event) {
        this.pullRefresh && !this.isScrollBottomFetching && !this.isPullRefreshFetching && core.handleTouchEnd.call(this, event)
      },
      onScroll (event) {
        let el = event.target
        this.scrollTop = el.scrollTop
        if (!this.isPullRefreshFetching && this.infiniteScroll && !this.isScrollBottomFetching && !this.isScrollBottomFetchingFinished && el.scrollHeight - el.clientHeight - el.scrollTop <= this.infiniteScrollDistance) {
          this.$refs['loadingBottomBoxRef'].style.display = 'block'
          this.isScrollBottomFetching = true
          this.infiniteScroll((allFetched) => {
            this.$refs['loadingBottomBoxRef'].style.display = 'none'
            this.isScrollBottomFetching = false
            if (allFetched) {
              this.isScrollBottomFetchingFinished = true
            }
          })
        }
      },
      handlePullRefresh () {
        if (this.pullRefresh) {
          this.isPullRefreshFetching = true
          this.pullRefresh((allFetched) => {
            this.isPullRefreshFetching = false
            if (allFetched) {
              this.isScrollBottomFetchingFinished = true
            }
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "styleMix";
  @include vmui-scroll-section;
</style>
